// ------------------------ 获取分数，展示列表 -----------------
function renderScore() {
  axios.get('/score/list').then((res) => {
    let { code, data } = res.data
    if (code === 0) {
      let arr = []
      for (let key in data) {
        arr.push(`
          <tr>
              <th scope="row">${key}</th>
              <td>${data[key].name}</td>
              <td data-batch="1" data-id="${key}" class="score">${data[key].score[0]}</td>
              <td data-batch="2" data-id="${key}" class="score">${data[key].score[1]}</td>
              <td data-batch="3" data-id="${key}" class="score">${data[key].score[2]}</td>
              <td data-batch="4" data-id="${key}" class="score">${data[key].score[3]}</td>
              <td data-batch="5" data-id="${key}" class="score">${data[key].score[4]}</td>
          </tr>`)
      }

      qs('tbody').innerHTML = arr.join('')
    }
  })
}
renderScore()

// ------------------------ 可编辑的表格 -----------------------
// 可编辑的表格
qs('tbody').onclick = function (e) {
  const isScore = e.target.classList.contains('score')
  if (isScore) {
    let td = e.target
    if (td.querySelector('input')) return // 判断如果已经有input了，就不要在重复添加input了
    let text = td.innerText // 保存td的分数
    td.innerHTML = '' // 设置 td 内容为空

    // 动态创建 input
    let input = document.createElement('input')
    input.value = text
    td.appendChild(input)
    input.focus() // 获取焦点

    let isEditOk = false // 记录编辑状态

    // 为input注册事件
    input.onkeyup = function (e) {
      if (e.key === 'Enter') {
        let score = this.value
        if (isNaN(score) || score < 0 || score > 100) {
          return alert('请输入0-100之间的数字')
        }
        let stu_id = td.dataset.id
        let batch = td.dataset.batch
        
        // 发送请求, 修改或录入成绩
        axios.post('/score/entry', { score, stu_id, batch }).then(res => {
          const { code, message } = res.data
          if (code === 0) {
            isEditOk = true
            td.innerHTML = score
          }
        })
      }
    }
    // 为input注册blur事件
    input.onblur = function (e) {
      if (!isEditOk) {
        td.innerHTML = text // 只要没有编辑成功, 失去焦点后，将原来td的值设置回去
      }
    }
  }
}
